<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            color: antiquewhite;
            font-size: 23px;
            font-weight: 800;
        }
    </style>
</head>
<body>
    <p class="box1">飞流<strong>平衡</strong></p>
    <p class="box2">梅梅</p>
    <div class="box3">聪明 <br/> 
        小聪白 又白</div>
     <a href="#" class="ni" data-index="9">这是一个链接</a>
     <img src="." alt="">
</body>
<script>
    //操作元素的方法
    const em1 = document.querySelector('.box1')
    console.log(em1.innerHTML);//获取
    em1.innerHTML = '大数据<em>大智慧<em/>,大未来'; //设置
    console.log(em1.innerText);
    em1.innerText = '飞流<strong>平衡</strong>';
    console.log(em1.textContent);
    em1.textContent = '大数据<em>大智慧<em/>,大未来';
    const em2 = document.querySelector('.box3') ;
    console.log(em2.innerHTML);
    console.log(em2.innerText);
    console.log(em2.textContent);
    const em3 = document.querySelector('.ni');
    console.log(em3.href);
    em3.href = 'https://www.baidu.com'; //设置对象的属性值
    em3.textContent = '百度一下';
    em3.setAttribute('href','https://www.mi.com') //设置内置属性值
    em3.setAttribute('data-index','8')  //设置自定义属性值
    console.log(em3.getAttribute('data-index'));    //获取自定义属性值
    // elemen.dataset.属性 = '值'，这里的属性只取data-后的自定义属性名
    em3.dataset.index = '6';
    console.log(em3.dataset.index);
    // console.log(em3.dataset['index']);
    em3.removeAttribute('data-index');  //内置属性和自定义属性均使用此方法移除
    console.log(em3.getAttribute('data-index'))
    em3.style.color = 'blue';
    //所有css中带-的属性在这里一律改成：去掉-首字母大写。例：font-size:fontSiz
    em3.style.fontSize = '23px';//font-size:fontSiz
    em3.className = 'ni box'
</script>

</html>